import React from "react";
import {
  View,
  TouchableOpacity,
  Image,
  Text,
  Platform,
  Linking
} from "react-native";

import SizeUtils from "../../common/SizeUtils";
import ToastUtils from "../../common/ToastUtils";
import CommonStyles from "../../common/CommonStyles";
import Config from "../../config";
import BasePage from "../common/BasePage";
import LoginCheckVersionAction from "../../actions/login/LoginCheckVersionAction";

const BTN_LABEL = ["检测新版本", "检测中..."];

export default class UserAboutPage extends BasePage {
  constructor(props) {
    super(props);

    this.state.isResponeUpdate = false;
    this.state.statusText = "";
    this.state.checkState = 0;
  }

  componentWillUpdate(nextProps, nextState) {
    super.componentWillUpdate(nextProps, nextState);

    if (nextState.isResponeUpdate === true) {
      nextState.isResponeUpdate = false;
      nextState.checkState = 0;
      if (nextState.data && nextState.data.update_client === 0) {
        ToastUtils.show("当前版本已是最新");
      }
    }
    if (nextState.statusText != "") {
      ToastUtils.show(nextState.statusText);
      nextState.statusText = "";
      nextState.checkState = 0;
    }
  }

  render() {
    return (
      <View
        style={[
          CommonStyles.page,
          {
            paddingTop: Config.paddingTop,
            flex: 1,
            paddingLeft: SizeUtils.translateDesignWidthToCode(40),
            paddingRight: SizeUtils.translateDesignWidthToCode(40),
            backgroundColor: "#ffffff",
            alignItems: "center"
          }
        ]}
      >
        <Image
          style={{
            width: SizeUtils.translateDesignWidthToCode(175),
            height: SizeUtils.translateDesignWidthToCode(175),
            borderRadius: SizeUtils.translateFontSizeToCode(10),
            marginTop: SizeUtils.translateDesignHeightToCode(40)
          }}
          source={require("../../../resource/images/user/appIcon.png")}
        />
        {this._renderVersion()}
        {this._renderNavigationBar()}
      </View>
    );
  }

  _renderVersion() {
    return (
      <View
        style={{
          flex: 1,
          paddingTop: SizeUtils.translateDesignHeightToCode(30),
          flexDirection: "column",
          height: SizeUtils.translateDesignHeightToCode(100),
          alignItems: "center"
        }}
      >
        <Text
          style={{
            textAlign: "center",
            fontSize: SizeUtils.translateFontSizeToCode(24),
            color: "#B4B4B4"
          }}
        >
          V {Config.version_app}
        </Text>
      </View>
    );
  }

  _renderUpdateButton() {
    if (Platform.OS === "ios") {
    } else {
      return (
        <TouchableOpacity
          style={{
            borderRadius: SizeUtils.translateDesignNumToCode(20),
            borderColor: "#db3132",
            marginTop: SizeUtils.translateDesignHeightToCode(40),
            marginLeft: SizeUtils.translateDesignWidthToCode(20),
            marginRight: SizeUtils.translateDesignWidthToCode(20),
            width: SizeUtils.translateDesignWidthToCode(350),
            height: SizeUtils.translateDesignHeightToCode(80),
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            borderWidth: SizeUtils.translateDesignNumToCode(5)
          }}
          onPress={this._onPressCheckVersion.bind(this)}
        >
          <Text
            style={{
              textAlign: "center",
              fontSize: SizeUtils.translateFontSizeToCode(30)
            }}
          >
            {this._getBtnLabel()}
          </Text>
        </TouchableOpacity>
      );
    }
  }

  _getBtnLabel() {
    if (Platform.OS === "ios") {
      return "去AppStore检查更新";
    } else {
      return BTN_LABEL[this.state.checkState];
    }
  }

  _onPressCheckVersion() {
    if (Platform.OS === "ios") {
      Linking.openURL(Config.app_url);
    } else {
      this.setState({
        checkState: 1
      });
      new LoginCheckVersionAction().call(this);
    }
  }
}
